<template>
  <footer class="shop_footer">
    <div class="container">
      <div class="footer_icon_list">
        <div class="list_top">
          <!-- <i class="iconfont icon-7tianbaotui
          "></i> -->
          <img src="@/assets/svg/全国联保.svg" alt="" />
          <span>全国联保</span>
        </div>
        <div class="list_top" width="50">
          <!-- <i class="iconfont icon-7tianbaotui
          "></i> -->
          <img src="@/assets/svg/全国联保.svg" alt="" />
          <span>全国联保</span>
        </div>
        <div class="list_top">
          <!-- <i class="iconfont icon-7tianbaotui
          "></i> -->
          <img src="@/assets/svg/全国联保.svg" alt="" />
          <span>全国联保</span>
        </div>
        <div class="list_top">
          <!-- <i class="iconfont icon-7tianbaotui
          "></i> -->
          <img src="@/assets/svg/全国联保.svg" alt="" />
          <span>全国联保</span>
        </div>
        <div class="list_top">
          <!-- <i class="iconfont icon-7tianbaotui
          "></i> -->
          <img src="@/assets/svg/全国联保.svg" alt="" />
          <span>全国联保</span>
        </div>
      </div>

      <hr class="theme-light" />

      <div class="footer_content">
        <div class="footer-links">
          <div class="footer-links-row">
            <div class="footer-content-title">OPPO</div>
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
          </div>
          <div class="footer-links-row">
            <div class="footer-content-title">OPPO</div>
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
          </div>
          <div class="footer-links-row">
            <div class="footer-content-title">OPPO</div>
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
            <a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            ><a href="javascript:;" class="footer-content-link">
              Find N 全新折叠旗舰</a
            >
          </div>
        </div>
        <!-- 在线客服 -->
        <div class="hotline">
          <div class="hotline-btn">
            <img
              src="@/assets/svg/在线客服白.svg"
              alt=""
              height="28"
              width="28"
              class="footer-call"
            />
            <span>在线客服</span>
          </div>
        </div>
      </div>
      <hr class="theme-light" />
      <!-- 网备案 -->
      <div></div>
    </div>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      guarantee: '@/assets/svg/全国联保.svg'
    }
  }
}
</script>

<style lang="scss">
/* 底部样式 */
.shop_footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #fff;
  padding: 42px 16px 6px 16px;
}

.shop_footer .container {
  /* height: 500px; */
  width: 68%;
  /* background-color: pink; */
  display: flex;
  flex-direction: column;
  /* overflow: hidden; */
}

.footer_icon_list {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 82px;
  /* margin: 40px; */
  /* padding-top: 40px; */
  /* border-bottom: 1px solid #222; */
  margin-bottom: 40px;
}

.list_top {
  display: flex;
  flex-flow: column;
  width: 16%;
  align-items: center;
  justify-content: space-around;
}

.list_top img {
  height: 50px;
  aspect-ratio: auto 50 / 50;
  width: 50px;
  margin-bottom: 8px;
}

.list_top span {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.87);
  line-height: 24px;
}

.theme-light {
  display: block;
  flex: 1 1 0px;
  width: 100%;
  max-width: 100%;
  transition: inherit;
  height: 0;
  max-height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-width: thin 0 0;
}
/* 底部商品列表开始 */
.footer_content {
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  line-height: 24px;
  margin-bottom: 42px;
  margin-top: 46px;
  width: 100%;
  text-transform: none !important;
}

.footer-links {
  display: flex;
  flex-flow: row wrap;
}

.footer-links .footer-links-row {
  flex: 1;
  display: flex;
  flex-flow: column;
  min-width: 160px;
  margin-right: 20px;
}

/* 列表部分 */
.footer-content-title {
  font-weight: 500;
  margin-bottom: 12px;
  white-space: nowrap;
}

.footer-links-row .footer-content-link {
  color: #535355;
  margin-bottom: 12px;
  text-decoration-line: none;
  font-weight: 300;
}

.footer-links-row .footer-content-link:hover {
  color: #535355;
}

/* 客服部分 */
.hotline {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: flex-end;
}

.hotline-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  cursor: pointer;
  color: #fff;
  width: 173px;
  height: 51px;
  font-size: 15px;
  background-color: #000;
  border-radius: 28px;
}

.footer-call {
  margin-right: 16px;
  color: #000;
}
</style>
